import { Modal,Button,Tabs,Select,DatePicker, Space  } from 'antd';
import React, { useState} from 'react';
import 'antd/dist/antd.css';
import './css/bg_sp.css'
import axios from 'axios'
const { TabPane } = Tabs;
const { Option } = Select;
const { RangePicker } = DatePicker;
let Bg_sp = function(){
    const [visible, setVisible] = useState(false);
    const [data,setData] = useState([])
    var sp=''
    var zt='all'
    var kssj=''
    var jssj=''
    
    function callback(key) {
        console.log(key);
    }
    function handleChange(value) {
        sp=value
        const FetchData1 = async () => {
            const result = await axios.post(
                'http://crm.cimns.com/index.php/oa/examine/index',{
                    by: 'stay_examine',
                    limit: 15,
                    category_id: sp,
                    check_status: zt,
                    page: 1,
                });
            
            setData(result.data.data.list)
        };
        FetchData1();
    }
    function handleChange1(value) {
        zt=value
        const FetchData1 = async () => {
            const result = await axios.post(
                'http://crm.cimns.com/index.php/oa/examine/index',{
                    by: 'stay_examine',
                    limit: 15,
                    category_id: sp,
                    check_status: zt,
                    page: 1,
                });
            
            setData(result.data.data.list)
        };
        FetchData1();
        
    }
    function handleChange2(value) {
        kssj=+new Date(value[0]);
        jssj=+new Date(value[1])
        console.log(kssj,jssj);
        const FetchData1 = async () => {
            const result = await axios.post(
                'http://crm.cimns.com/index.php/oa/examine/index',{
                    by: 'stay_examine',
                    limit: 15,
                    category_id: sp,
                    check_status: zt,
                    page: 1,
                    between_time: kssj,
                    between_time: jssj
                });
            
            setData(result.data.data.list)
        };
        FetchData1();
    }
    console.log(data);
    return(
        <div className="sp">
            <div className="new-wrap">
                <div style={{float:'left',marginRight:'20px'}}>
                    <span style={{color:'#000'}}>审批类型</span>
                    <Select defaultValue="" style={{ width: 120 }} onChange={handleChange}>
                        <Option value="">全部</Option>
                        <Option value="1">普通审批</Option>
                        <Option value="2">请假审批</Option>
                        <Option value="3">出差审批</Option>
                        <Option value="4">加班审批</Option>
                        <Option value="5">差旅报销</Option>
                        <Option value="6">借款申请</Option>
                    </Select>
                </div>
                <Button style={{float:'left'}}><a type="primary" onClick={() => setVisible(true)}>新建任务</a></Button>
            </div>
            <Tabs defaultActiveKey="1" onChange={callback}>
                <TabPane tab="我发起的" key="1">
                <div style={{float:'left',marginRight:'20px'}}>
                    <span style={{float:'left',color:'#000',lineHeight:'32px'}}>审批状态</span>
                    <Select defaultValue="all" style={{float:'left', width: 120,marginRight:'20px' }} onChange={handleChange1}>
                        <Option value="all">全部</Option>
                        <Option value="0">待审</Option>
                        <Option value="1">审批中</Option>
                        <Option value="2">通过</Option>
                        <Option value="3">失败</Option>
                        <Option value="4">撤回</Option>
                    </Select>
                    <span style={{float:'left',lineHeight:'32px',marginRight:'20px' }}>发起时间</span>
                    <Space direction="vertical" size={12} style={{float:'left',height:'32px',width:'250px'}}>
                        <RangePicker onChange={handleChange2} style={{width:'250px',height:'32px'}} />
                    </Space>
                    
                </div>
                <div style={{marginTop:'100px'}}>
                        {data.map((item,index) => (
                            <div key={index} className= 'for' id='for'>
                            <div><img src={item.create_user_info.img} alt='理员'/></div>
                            <div className='clearfix'>
                                <div className='clearfix pp'>
                                <p>{item.create_user_info.realname}<span>{item.content}</span></p>
                                <p>
                                    <img alt='0' src=''/>
                                    {item.type_name}
                                    </p>
                                </div>
                                <span className='span'>{item.create_time}</span>
                                <div className='vv'><a href='#'>{item.title}</a></div>
                            </div>
                            </div>
                        ))}
                    </div>
                    <div style={{fontSize:'12px',textAlign: 'center',color:'#999'}}>没有更多啦</div>
                </TabPane>
                <TabPane tab="我审批的" key="2">
                <div style={{float:'left',marginRight:'20px'}}>
                    <span style={{float:'left',color:'#000',lineHeight:'32px'}}>审批状态</span>
                    <Select defaultValue="all" style={{float:'left', width: 120,marginRight:'20px' }} onChange={handleChange1}>
                        <Option value="all">待我审批的</Option>
                        <Option value="0">我已审批的</Option>
                    </Select>
                    <span style={{float:'left',lineHeight:'32px',marginRight:'20px' }}>发起时间</span>
                    <Space direction="vertical" size={12} style={{float:'left',height:'32px',width:'250px'}}>
                        <RangePicker onChange={handleChange2} style={{width:'250px',height:'32px'}} />
                    </Space>
                    
                </div>
                <div style={{marginTop:'100px'}}>
                        {data.map((item,index) => (
                            <div key={index} className= 'for' id='for'>
                            <div><img src={item.create_user_info.img} alt='理员'/></div>
                            <div className='clearfix'>
                                <div className='clearfix pp'>
                                <p>{item.create_user_info.realname}<span>{item.content}</span></p>
                                <p>
                                    <img alt='0' src=''/>
                                    {item.type_name}
                                    </p>
                                </div>
                                <span className='span'>{item.create_time}</span>
                                <div className='vv'><a href='#'>{item.title}</a></div>
                            </div>
                            </div>
                        ))}
                    </div>
                    <div style={{fontSize:'12px',textAlign: 'center',color:'#999'}}>没有更多啦</div>
                </TabPane>
            </Tabs>
            <div>
      
                <Modal
                   centered
                   visible={visible}
                   onOk={() => setVisible(false)}
                   onCancel={() => setVisible(false)}
                   width={100+'%'}
                   height={100+'%'}
                >
                    <div className="cj" style={{paddingTop:50}}>
                        <span style={{padding:'10px 20px',border:'1px #3e84e9 solid',margin:'10px 20px',float:'left'}}>普通审批</span>
                        <span style={{padding:'10px 20px',border:'1px #3e84e9 solid',margin:'10px 20px',float:'left'}}>请假审批</span>
                        <span style={{padding:'10px 20px',border:'1px #3e84e9 solid',margin:'10px 20px',float:'left'}}>出差审批</span>
                        <span style={{padding:'10px 20px',border:'1px #3e84e9 solid',margin:'10px 20px',float:'left'}}>加班审批</span><br></br>
                        <span style={{padding:'10px 20px',border:'1px #3e84e9 solid',margin:'10px 20px',float:'left'}}>差旅报销</span>
                        <span style={{padding:'10px 20px',border:'1px #3e84e9 solid',margin:'10px 20px',float:'left'}}>借款申请</span>
                    </div>
                </Modal>
            </div>
        </div>
    )
}
export default Bg_sp